import React from 'react';
import * as echarts from 'echarts';
import _ from 'lodash';
import { default as MyChart } from '@/pages/GanSuDaTang/Dashboard/components/chart';
import styles from './index.less';

export default ({ dataSource }) => {
  const getChart = () => {
    const list = dataSource?.dataDeptPriceRanking?.deptPriceRankingList || [];
    const marketAvePrice = dataSource?.layout?.marketAvePrice || 0;
    return {
      dataset: {
        source: list.map((x) => ({
          ...x,
          stationPrice: Math.round(x.stationPrice),
          marketAvePrice,
        })),
        dimensions: ['stationName', 'stationPrice', 'marketAvePrice'],
      },
      grid: { top: 24, right: 10, bottom: 50, left: 36 },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        nameGap: 8,
        axisLabel: {
          interval: 0,
          rotate: 30,
          color: 'rgba(255, 255, 255, 0.9)',
          formatter: (v) => {
            let res = v;
            if (v === '武威红沙岗风电') res = v.replace('武威', '');
            return v.replace('风电', '').replace('景泰', '').replace('瓜州', '');
          },
        },
        axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.25)' } },
        axisTick: {
          alignWithLabel: true,
          length: 4,
          lineStyle: { color: 'rgba(255, 255, 255, 0.25)' },
        },
        splitLine: { show: false },
      },
      yAxis: {
        type: 'value',
        name: '元/MWh',
        nameGap: 8,
        nameTextStyle: {
          fontSize: 12,
          lineHeight: 17,
          color: 'rgba(255, 255, 255, 0.6)',
          padding: [0, 0, 0, -10],
        },
        axisLabel: { color: 'rgba(255, 255, 255, 0.6)' },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
      },
      legend: {
        data: [
          {
            name: '场站电价',
            icon: 'rect',
            itemStyle: { color: '#07A872' },
            lineStyle: { opacity: 0 },
          },
          {
            name: '市场均价',
            itemStyle: { opacity: 0 },
            lineStyle: { color: '#3CB1FB', width: 3 },
          },
        ],
        width: '60%',
        top: 2,
        right: 2,
        itemGap: 18,
        itemWidth: 8,
        itemHeight: 8,
        textStyle: { fontSize: 12, lineHeight: 12, color: 'rgba(255, 255, 255, 0.9)' },
        padding: 0,
        borderWidth: 0,
        inactiveBorderWidth: 0,
      },
      series: [
        {
          type: 'bar',
          name: '场站电价',
          barMaxWidth: 15,
          label: {
            show: true,
            position: 'top',
            fontSize: 14,
            textBorderWidth: 0,
            color: 'rgba(255, 255, 255, 0.9)',
            distance: 2,
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#07A872' },
              { offset: 1, color: 'rgba(7, 168, 114, 0.1)' },
            ]),
          },
        },
        {
          type: 'line',
          name: '市场均价',
          symbol: 'none',
          itemStyle: { color: '#3CB1FB' },
          lineStyle: { type: 'dashed', width: 3 },
          emphasis: { lineStyle: { type: 'dashed', width: 3 } },
          markPoint: {
            symbol: 'roundRect',
            symbolSize: 0,
            label: { show: true, color: 'rgba(255, 255, 255, 0.9)' },
            data: [{ type: 'max', name: 'Max' }],
          },
        },
      ],
    };
  };
  return (
    <div className={styles.container}>
      <MyChart option={getChart()} />
    </div>
  );
};
